<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Module | Vuex</title>
    <meta name="description" content="Vue.js 的中心化状态管理方案">
    <link rel="icon" href="logo.png">
  <link rel="apple-touch-icon" href="https://vuex.vuejs.org/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="https://vuex.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    
    <link rel="preload" href="https://vuex.vuejs.org/assets/css/0.styles.04c31208.css" as="style"><link rel="preload" href="https://vuex.vuejs.org/assets/js/app.92019be7.js" as="script"><link rel="preload" href="https://vuex.vuejs.org/assets/js/104.1d8f5eda.js" as="script"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/10.9ff0229a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/100.ff89a77e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/101.75e31694.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/102.9eb5b6b9.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/103.84f39ee4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/105.22d02a0b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/106.6c7f9f4f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/107.df69838a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/108.57710a8f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/109.0b9350df.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/11.22ec5291.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/110.da276e13.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/111.d271062b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/112.fff28bd3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/12.4bb08316.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/13.eb7734ad.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/14.189de3ec.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/15.96301577.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/16.d35e6c41.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/17.6932f877.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/18.14d47735.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/19.f57a3619.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/20.4b3b43ce.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/21.fdbf3e9a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/22.38a06d07.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/23.20e52ca0.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/24.38c1ec6f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/25.d0749285.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/26.fa0199ca.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/27.104f01d5.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/28.0502b1eb.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/29.a3deb738.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/3.c2431962.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/30.5f61f97c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/31.c13e234c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/32.3346e47e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/33.9552f2b4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/34.22c87151.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/35.e274dae2.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/36.1f72edfe.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/37.3c8f5a6b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/38.18505477.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/39.fa1ab3f0.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/4.6114c173.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/40.82b0bf0f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/41.83249a92.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/42.dedbcb2b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/43.1626a294.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/44.46f3ccfa.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/45.5e63c438.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/46.4837dfdd.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/47.507f6518.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/48.56ef6c75.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/49.14767935.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/5.fea3e8c1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/50.a2cf5518.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/51.9a6f14ab.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/52.21aa240c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/53.a7ca4e09.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/54.18643ae3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/55.48be8fde.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/56.8123f4e5.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/57.3f666e3d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/58.a7e61993.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/59.8be4dcd4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/6.e165131f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/60.b6d2d182.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/61.eca98d13.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/62.5ee1323a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/63.c36ff790.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/64.b063e22d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/65.d5a56cb7.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/66.32060737.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/67.7b1f4ad9.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/68.61c1fb5a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/69.9eecf973.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/7.6a20bd14.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/70.5012a640.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/71.76c479ea.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/72.25f5be51.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/73.d31aea65.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/74.98a6bff3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/75.fa397fe2.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/76.8b008b0b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/77.280e8204.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/78.ba855657.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/79.58af331f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/8.259b04b8.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/80.a0635feb.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/81.762ec5d1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/82.0d4604b1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/83.9d064f79.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/84.72918f87.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/85.0d9821f3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/86.1631e292.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/87.6c6ced24.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/88.c8dfc6b4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/89.3e00d819.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/9.e8b16084.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/90.cd40ed9e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/91.71809249.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/92.aba0a727.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/93.c9b387fd.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/94.5be4c560.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/95.a52fb380.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/96.74307a3e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/97.0738b41c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/98.44547c3f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/99.9a86824d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/vendors~docsearch.0cca2532.js">
    
  
<link rel="stylesheet" type="text/css" href="modules.css" media="all">
</head>
<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a indepth="true" href="index.html" class="home-link router-link-active"><!----> <span class="site-name">Vuex</span></a> <div class="links" style="max-width:nullpx;"><form action="https://vuex.vuejs.org/zh/guide/modules.html" id="search-form" class="algolia-search-wrapper search-box"><input value="" id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a indepth="true" href="default.html" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a indepth="true" href="default_001.html" class="nav-link">API 参考</a></div><div class="nav-item"><a href="https://github.com/vuejs/vuex/releases" target="_top" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;"><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/guide/modules.html" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a indepth="true" href="modules.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ja/guide/modules.html" class="nav-link">日本語</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ru/guide/modules.html" class="nav-link">Русский</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/kr/guide/modules.html" class="nav-link">한국어</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ptbr/guide/modules.html" class="nav-link">Português</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/fr/guide/modules.html" class="nav-link">Français</a></li></ul></div></div> <a href="https://github.com/vuejs/vuex" target="_top" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a indepth="true" href="default.html" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a indepth="true" href="default_001.html" class="nav-link">API 参考</a></div><div class="nav-item"><a href="https://github.com/vuejs/vuex/releases" target="_top" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;"><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/guide/modules.html" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a indepth="true" href="modules.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ja/guide/modules.html" class="nav-link">日本語</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ru/guide/modules.html" class="nav-link">Русский</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/kr/guide/modules.html" class="nav-link">한국어</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ptbr/guide/modules.html" class="nav-link">Português</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/fr/guide/modules.html" class="nav-link">Français</a></li></ul></div></div> <a href="https://github.com/vuejs/vuex" target="_top" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><a indepth="true" href="installation.html" class="sidebar-link">安装</a></li><li><a indepth="true" href="index.html" class="sidebar-link">Vuex 是什么？</a></li><li><a indepth="true" href="default.html" class="sidebar-link">开始</a></li><li><div class="sidebar-group"><p class="sidebar-heading open">核心概念 <!----></p> <ul class="sidebar-group-items"><li><a indepth="true" href="state.html" class="sidebar-link">State</a></li><li><a indepth="true" href="getters.html" class="sidebar-link">Getter</a></li><li><a indepth="true" href="mutations.html" class="sidebar-link">Mutation</a></li><li><a indepth="true" href="actions.html" class="sidebar-link">Action</a></li><li><a indepth="true" href="modules.html" class="active sidebar-link">Module</a><ul class="sidebar-sub-headers"></ul></li></ul></div></li><li><a indepth="true" href="structure.html" class="sidebar-link">项目结构</a></li><li><a indepth="true" href="plugins.html" class="sidebar-link">插件</a></li><li><a indepth="true" href="strict.html" class="sidebar-link">严格模式</a></li><li><a indepth="true" href="forms.html" class="sidebar-link">表单处理</a></li><li><a indepth="true" href="testing.html" class="sidebar-link">测试</a></li><li><a indepth="true" href="hot-reload.html" class="sidebar-link">热重载</a></li></ul> </div> <div class="page"> <div class="content"><h1 id="module"><a href="#module" aria-hidden="true" class="header-anchor">#</a> Module</h1> <div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cqKK4psq" target="_top" rel="noopener noreferrer">在 Scrimba 上尝试这节课</a></div> <p>由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。</p> <p>为了解决以上问题，Vuex 允许我们将 store 分割成<strong>模块（module）</strong>。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">:</span> moduleA<span class="token punctuation">,</span>
    b<span class="token punctuation">:</span> moduleB
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment">// -&gt; moduleA 的状态</span>
store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment">// -&gt; moduleB 的状态</span>
</code></pre></div><h3 id="模块的局部状态"><a href="#模块的局部状态" aria-hidden="true" class="header-anchor">#</a> 模块的局部状态</h3> <p>对于模块内部的 mutation 和 getter，接收的第一个参数是<strong>模块的局部状态对象</strong>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 这里的 `state` 对象是模块的局部状态</span>
      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">doubleCount</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>同样，对于模块内部的 action，局部状态通过 <code>context.state</code> 暴露出来，根节点状态则为 <code>context.rootState</code>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">incrementIfOddOnRootSum</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">sumWithRootCount</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="命名空间"><a href="#命名空间" aria-hidden="true" class="header-anchor">#</a> 命名空间</h3> <p>默认情况下，模块内部的 action、mutation 和 getter 是注册在<strong>全局命名空间</strong>的——这样使得多个模块能够对同一 mutation 或 action 作出响应。</p> <p>如果希望你的模块具有更高的封装度和复用性，你可以通过添加 <code>namespaced: true</code> 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    account<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

      <span class="token comment">// 模块内容（module assets）</span>
      state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响</span>
      getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">isAdmin</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; getters['account/isAdmin']</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">login</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; dispatch('account/login')</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">login</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; commit('account/login')</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>

      <span class="token comment">// 嵌套模块</span>
      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 继承父模块的命名空间</span>
        myPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function">profile</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; getters['account/profile']</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        <span class="token comment">// 进一步嵌套命名空间</span>
        posts<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function">popular</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; getters['account/posts/popular']</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>启用了命名空间的 getter 和 action 会收到局部化的 <code>getter</code>，<code>dispatch</code> 和 <code>commit</code>。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 <code>namespaced</code> 属性后不需要修改模块内的代码。</p> <h4 id="在带命名空间的模块内访问全局内容（global-assets）"><a href="#在带命名空间的模块内访问全局内容（global-assets）" aria-hidden="true" class="header-anchor">#</a> 在带命名空间的模块内访问全局内容（Global Assets）</h4> <p>如果你希望使用全局 state 和 getter，<code>rootState</code> 和 <code>rootGetters</code> 会作为第三和第四参数传入 getter，也会通过 <code>context</code> 对象的属性传入 action。</p> <p>若需要在全局命名空间内分发 action 或提交 mutation，将 <code>{ root: true }</code> 作为第三参数传给 <code>dispatch</code> 或 <code>commit</code> 即可。</p> <div class="language-js extra-class"><pre class="language-js"><code>modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

    getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// 在这个模块的 getter 中，`getters` 被局部化了</span>
      <span class="token comment">// 你可以使用 getter 的第四个参数来调用 `rootGetters`</span>
      <span class="token function">someGetter</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">,</span> rootGetters<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        getters<span class="token punctuation">.</span>someOtherGetter <span class="token comment">// -&gt; 'foo/someOtherGetter'</span>
        rootGetters<span class="token punctuation">.</span>someOtherGetter <span class="token comment">// -&gt; 'someOtherGetter'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      someOtherGetter<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// 在这个模块中， dispatch 和 commit 也被局部化了</span>
      <span class="token comment">// 他们可以接受 `root` 属性以访问根 dispatch 或 commit</span>
      <span class="token function">someAction</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootGetters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        getters<span class="token punctuation">.</span>someGetter <span class="token comment">// -&gt; 'foo/someGetter'</span>
        rootGetters<span class="token punctuation">.</span>someGetter <span class="token comment">// -&gt; 'someGetter'</span>

        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'someOtherAction'</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; 'foo/someOtherAction'</span>
        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'someOtherAction'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; 'someOtherAction'</span>

        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; 'foo/someMutation'</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; 'someMutation'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">someOtherAction</span> <span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="在带命名空间的模块注册全局-action"><a href="#在带命名空间的模块注册全局-action" aria-hidden="true" class="header-anchor">#</a> 在带命名空间的模块注册全局 action</h4> <p>若需要在带命名空间的模块注册全局 action，你可添加 <code>root: true</code>，并将这个 action 的定义放在函数 <code>handler</code> 中。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">someOtherAction</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>dispatch<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'someAction'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        someAction<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          root<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token function">handler</span> <span class="token punctuation">(</span>namespacedContext<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// -&gt; 'someAction'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="带命名空间的绑定函数"><a href="#带命名空间的绑定函数" aria-hidden="true" class="header-anchor">#</a> 带命名空间的绑定函数</h4> <p>当使用 <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> 和 <code>mapMutations</code> 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：</p> <div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    a<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
    b<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>b
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    <span class="token string">'some/nested/module/foo'</span><span class="token punctuation">,</span> <span class="token comment">// -&gt; this['some/nested/module/foo']()</span>
    <span class="token string">'some/nested/module/bar'</span> <span class="token comment">// -&gt; this['some/nested/module/bar']()</span>
  <span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：</p> <div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
    b<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>b
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
    <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token comment">// -&gt; this.foo()</span>
    <span class="token string">'bar'</span> <span class="token comment">// -&gt; this.bar()</span>
  <span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>而且，你可以通过使用 <code>createNamespacedHelpers</code> 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createNamespacedHelpers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createNamespacedHelpers</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在 `some/nested/module` 中查找</span>
    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      a<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
      b<span class="token punctuation">:</span> state <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>b
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在 `some/nested/module` 中查找</span>
    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token string">'foo'</span><span class="token punctuation">,</span>
      <span class="token string">'bar'</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="给插件开发者的注意事项"><a href="#给插件开发者的注意事项" aria-hidden="true" class="header-anchor">#</a> 给插件开发者的注意事项</h4> <p>如果你开发的<a indepth="true" href="plugins.html">插件（Plugin）</a>提供了模块并允许用户将其添加到 Vuex store，可能需要考虑模块的空间名称问题。对于这种情况，你可以通过插件的参数对象来允许用户指定空间名称：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 通过插件的参数对象得到空间名称</span>
<span class="token comment">// 然后返回 Vuex 插件函数</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">createPlugin</span> <span class="token punctuation">(</span>options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>store<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 把空间名字添加到插件模块的类型（type）中去</span>
    <span class="token keyword">const</span> namespace <span class="token operator">=</span> options<span class="token punctuation">.</span>namespace <span class="token operator">||</span> <span class="token string">''</span>
    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>namespace <span class="token operator">+</span> <span class="token string">'pluginAction'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="模块动态注册"><a href="#模块动态注册" aria-hidden="true" class="header-anchor">#</a> 模块动态注册</h3> <p>在 store 创建<strong>之后</strong>，你可以使用 <code>store.registerModule</code> 方法注册模块：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 注册模块 `myModule`</span>
store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token string">'myModule'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 注册嵌套模块 `nested/myModule`</span>
store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'nested'</span><span class="token punctuation">,</span> <span class="token string">'myModule'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>之后就可以通过 <code>store.state.myModule</code> 和 <code>store.state.nested.myModule</code> 访问模块的状态。</p> <p>模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如，<a href="https://github.com/vuejs/vuex-router-sync" target="_top" rel="noopener noreferrer"><code>vuex-router-sync</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。</p> <p>你也可以使用 <code>store.unregisterModule(moduleName)</code> 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。</p> <h4 id="保留-state"><a href="#保留-state" aria-hidden="true" class="header-anchor">#</a> 保留 state</h4> <p>在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。你可以通过 <code>preserveState</code> 选项将其归档：<code>store.registerModule('a', module, { preserveState: true })</code>。</p> <p>当你设置 <code>preserveState: true</code> 时，该模块会被注册，action、mutation 和 getter 会被添加到 store 中，但是 state 不会。这里假设 store 的 state 已经包含了这个 module 的 state 并且你不希望将其覆写。</p> <h3 id="模块重用"><a href="#模块重用" aria-hidden="true" class="header-anchor">#</a> 模块重用</h3> <p>有时我们可能需要创建一个模块的多个实例，例如：</p> <ul><li>创建多个 store，他们公用同一个模块 (例如当 <code>runInNewContext</code> 选项是 <code>false</code> 或 <code>'once'</code> 时，为了<a href="https://ssr.vuejs.org/en/structure.html#avoid-stateful-singletons" target="_top" rel="noopener noreferrer">在服务端渲染中避免有状态的单例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</li> <li>在一个 store 中多次注册同一个模块</li></ul> <p>如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致状态对象被修改时 store 或模块间数据互相污染的问题。</p> <p>实际上这和 Vue 组件内的 <code>data</code> 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> MyReusableModule <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">state</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      foo<span class="token punctuation">:</span> <span class="token string">'bar'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// mutation, action 和 getter 等等...</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a indepth="true" href="actions.html" class="prev">
          Action
        </a></span> <span class="next"><a indepth="true" href="structure.html">
          项目结构
        </a>
        →
      </span></p></div> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div></div> <!----></div></div>
    
  




</body></html>
